

:root{
	/* this is for the field background */
	/* @dom-native/ui */
	--d-field-bkg: #FFF;
	--d-field-v-padding: 0.5rem;
	--d-field-bdr: var(--clr-gray-400);
}


@define-mixin field-popup{
	position: absolute;
	@mixin elev-6{};
	width: 8rem;
	background: #FFF;
	max-height: 15rem;
	overflow: auto;
	border-radius: 4px;
	z-index: 1000;
	min-width: 12.5rem;
	li.none{
		color: red;
	}
	ul, li{
		margin: 0;
		padding: 0;
		color: var(--txt);
		font-size: var(--txt-body2-size);
	}
	ul{
		& > li{
			list-style: none;
			cursor: pointer;
			line-height: 1.4;
			padding: 0px 8px;
			height: 40px;
			border-bottom: 1px solid var(--d-field-bdr);
			display: grid;
			grid-template-columns: 1fr 16px;
			align-items: center;
			&.sel{
				color: var(--bkg-active);
				d-ico{
					height: 16px;
					fill: var(--bkg-active);
				}
			}
			&:hover{
				color: var(--bkg-active);
			}
			&:not([data-val]){
				color: var(--txt);
			}
			d-ico{
				min-width: 16px;
			}
		}

	}
}

@define-mixin field-select{
	grid-template-columns: var(--d-field-v-padding) 1fr 32px;
	> div.d-ipt{
		display: inline-block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 2rem;
	}
	> .d-box{
		grid-column-end: 6;
	}
	> d-ico.chevron {
		grid-row:1 / 3;
		grid-column:3;
		svg.symbol{
			width: 1rem;
			height: 1rem;
		}
	}
	&:hover:not([disabled]):not([readonly]){
		> d-ico.chevron {
			fill: var(--clr-prime-500);
		}
	}
	&.focused{
		> d-ico.chevron {
			transform: rotate(180deg);
		}
	}
	&[readonly]{
		border: none;
		cursor: default;
		> d-ico.chevron {
			display: none;
		}
	}
	&.no-label.no-value{
		> .d-ipt{
			color: var(--clr-gray-600);
		}
	}
	
}

d-check.d-field, .d-check{
	.d-ipt{
		border: solid 1px var(--d-field-choice-bdr);
	}
}


.d-field{
	&.no-label {
		min-height: 2rem;
		border-radius: 4px;
	}
	> .d-ipt{
		font-size: var(--txt-body2-size);
	}
	&[readonly]{
		&.focused{
			> .d-box{
				border-color: var(--d-field-bdr);
			}
		}
	}
}
